<template>
    <view>
        <view class="alldiv">
            <view class="navdiv">
                <u-navbar back-text="返回" @leftClick="navigateBack" :leftText="language.Setup.nav"></u-navbar>
            </view>
            <view class="setlistdiv">
                <view class="setdiv">
                    <u-cell-group>
                        <u-cell isLink @click="MyGotoperson" :title="language.Setup.grxxtitle"></u-cell>
                    </u-cell-group>
                </view>
                <view class="setdiv">
                    <u-cell-group>
                        <!--            <u-cell-->
                        <!--              isLink-->
                        <!--              :title="language.Setup.phtitle"-->
                        <!--              @click="showphonenumber = true"-->
                        <!--            ></u-cell>-->
                        <u-cell isLink :title="language.Setup.pawtitle" @click="showpassword = true"></u-cell>
                        <u-cell isLink :title="language.Setup.zhzxtitle" @click="showlogoff = true"></u-cell>
                        <u-cell isLink :title="language.Setup.yyxztitle" @click="show = true"></u-cell>
                        <u-cell isLink :title="language.Setup.logout" @click="showLogOff = true"></u-cell>
                    </u-cell-group>
                </view>
            </view>
        </view>
        <u-popup :show="showphonenumber" mode="center" @open="open">
            <view class="serphdiv">
                <view style="margin-top: 40px">
                    <view class="serdiv">{{ language.Setup.phnumtitle }}</view>
                    <u--input :placeholder="language.Setup.phnumplaceholder" border="bottom" v-model="value" @change="change"></u--input>
                    <u--input :placeholder="language.Setup.conumplaceholder">
                        <template slot="suffix">
                            <span style="font-size: 12px; color: rgba(59, 167, 255, 1)">{{ language.Setup.cordbtn }}</span>
                        </template>
                    </u--input>
                    <view style="width: 100%; height: 80px; display: flex; align-items: center">
                        <u-button :text="language.Setup.qxbtn" type="default"></u-button>
                        <u-button :text="language.Setup.sjyzxgmm" color="rgba(47,212,184,1)"></u-button>
                    </view>
                </view>
            </view>
            <view style="position: relative; top: 30px; display: flex; justify-content: center">
                <u-icon @click="showphonenumberclose" name="close" size="28" color="#ffffff" style="position: relative"></u-icon>
            </view>
        </u-popup>
        <u-popup :show="showpassword" mode="center" @open="open">
            <view class="serphdiv">
                <view style="margin-top: 40px">
                    <view class="serdiv">{{ language.Setup.pawtitle }}</view>
                    <u--input :placeholder="language.Setup.pawwwplaceholder" border="bottom" v-model="value" @change="change"></u--input>
                    <u--input :placeholder="language.Setup.qrpaw"></u--input>
                    <view style="width: 100%; height: 80px; display: flex; align-items: center">
                        <u-button :text="language.Setup.qxsetpaw" type="default"></u-button>
                        <u-button :text="language.Setup.qdxgpaww" @click=";(showpasswordsuccessful = true), (showpassword = false)" color="rgba(47,212,184,1)"></u-button>
                    </view>
                </view>
            </view>
            <view style="position: relative; top: 30px; display: flex; justify-content: center">
                <u-icon @click="showpasswordclose" name="close" size="28" color="#ffffff" style="position: relative"></u-icon>
            </view>
        </u-popup>
        <u-popup :show="showpasswordsuccessful" mode="center" @open="open">
            <view class="serphdiv">
                <view style="margin-top: 40px">
                    <view class="serdiv" style="display: flex; flex-direction: column">
                        <view class="yandiv">
                            <u-icon name="checkbox-mark" size="50" color="#ffffff"></u-icon>
                        </view>
                        <view style="margin-top: 20px; color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: bold">{{ language.Setup.promptpaw }}</view>
                    </view>
                    <view style="width: 100%; height: 80px; display: flex; align-items: center">
                        <u-button :text="language.Setup.qdvtn" color="rgba(47,212,184,1)"></u-button>
                    </view>
                </view>
            </view>
            <view style="position: relative; top: 30px; display: flex; justify-content: center">
                <u-icon @click="showpasswordsuccessfulclose" name="close" size="28" color="#ffffff" style="position: relative"></u-icon>
            </view>
        </u-popup>
        <u-popup :show="showlogoff" mode="center" @open="open">
            <view class="serphdiv">
                <view style="margin-top: 40px">
                    <view class="serdiv" style="display: flex">
                        <view class="yandivd">
                            <span style="color: #ffffff">!</span>
                        </view>
                        <span style="margin-left: 10px; color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: bold">{{ language.Setup.zxprompt }}</span>
                    </view>
                    <view style="width: 100%; height: 80px; display: flex; align-items: center">
                        <u-button :text="language.Setup.zxqd" color="rgba(47,212,184,1)"></u-button>
                    </view>
                </view>
            </view>
            <view style="position: relative; top: 30px; display: flex; justify-content: center">
                <u-icon @click="showlogoffclose" name="close" size="28" color="#ffffff" style="position: relative"></u-icon>
            </view>
        </u-popup>

        <!--    <u-popup :show="showinternationalization" mode="center" @open="open">
      <view style="width: 300px; height: 150px">
        <u-cell-group>
          <u-cell
            :title="language.Setup.yyxz"
            @click="show = true"
            isLink
            :value="Languagepackage"
          ></u-cell>
        </u-cell-group>
        <view style="position: relative; top: 50px">
          <u-button
            type="primary"
            @click="MYChinese"
            :text="language.Setup.bc"
          ></u-button
        ></view>
        <view
          style="
            position: relative;
            top: 100px;
            display: flex;
            justify-content: center;
          "
        >
          <u-icon
            @click="showinternationalization = false"
            name="close"
            size="28"
            color="#ffffff"
            style="position: relative"
          ></u-icon
        ></view>
      </view>
    </u-popup> -->

        <u-picker :show="show" keyName="label" @confirm="clicklanguage" @cancel="show = false" :columns="columns"></u-picker>

        <u-popup :show="showLogOff" mode="center" @open="open">
            <view class="serphdiv">
                <view style="margin-top: 40px">
                    <view class="serdiv" style="display: flex">
                        <view class="yandivd">
                            <span style="color: #ffffff">!</span>
                        </view>
                        <span style="margin-left: 10px; color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: bold">{{ language.Setup.logoutConfirm }}</span>
                    </view>
                    <view style="width: 100%; height: 80px; display: flex; align-items: center">
                        <u-button @click="singUp" :text="language.Setup.zxqd" color="rgba(47,212,184,1)"></u-button>

                        <u-button @click="closePopup" :text="language.Setup.cancel" color="rgba(47,212,184,1)"></u-button>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import * as AuthApi from '@/api/member/auth.js'
// import {
// 	logOff
// } from "../../http/user/user";
export default {
    data() {
        return {
            show: false,
            columns: [
                [
                    {
                        label: '简体中文',
                        val: 'China'
                    },
                    {
                        label: 'English',
                        val: 'English'
                    },
                    {
                        label: 'ภาษาไทย',
                        val: 'Thailand'
                    }
                ]
            ],
            //账号注销
            showLogOff: false,
            language: {},
            // 修改手机号弹出框
            showphonenumber: false,
            // 修改密码弹出框
            showpassword: false,
            // 修改密码成功弹出框
            showpasswordsuccessful: false,
            //   账号注销弹出框
            showlogoff: false,
            // 语言弹出框
            // showinternationalization: false,
            Languagepackage: '',
            saveobj: null,
            value: ''
        }
    },
    onShow: function () {
        this.getLanguagepackage()
        this.getlanguage()
        // console.log("Personalcenter Show");
    },
    onLoad() {
        this.getLanguagepackage()
        this.getlanguage()
    },
    mounted() {
        this.getLanguagepackage()
        this.getlanguage()
    },
    methods: {
        //关闭
        closePopup() {
            console.log('open')
            this.showLogOff = false
        },
        clicklanguage(e) {
            console.log('已经选择对对对', e)
            e.value.forEach((item) => {
                this.saveobj = item
                this.$store.commit('internationalization/setccommed', item.label)
                if (item.label === '简体中文') {
                    this.$store.commit('internationalization/language', 'zh')
                } else if (item.label === 'English') {
                    this.$store.commit('internationalization/language', 'en')
                } else if (item.label === 'ภาษาไทย') {
                    this.$store.commit('internationalization/language', 'th')
                }
            })

            this.$store.commit('internationalization/addNumber')
            console.log(this.$store.state.internationalization.number)
            if (this.saveobj !== null) {
                this.$store.commit('internationalization/Setinternationalization', this.saveobj.val)
                this.getlanguage()
                this.show = false
            }
            this.getLanguagepackage()

            uni.reLaunch({
                url: '/path/Home/Home'
            })
        },
        getlanguage() {
            this.language = this.$store.getters['internationalization/getinternationalization']
            var Languagepackages = this.$store.getters['internationalization/getcomm']
            this.Languagepackage = Languagepackages
        },
        getLanguagepackage() {
            var Languagepackages = this.$store.getters['internationalization/getcomm']
            this.Languagepackage = Languagepackages
        },
        // 这个是设置语言
        // MYChinese() {
        //   console.log(typeof this.saveobj);
        //   if (this.saveobj !== null) {
        //     this.$store.commit(
        //       "internationalization/Setinternationalization",
        //       this.saveobj.val
        //     );
        //     this.getlanguage();
        //     this.showinternationalization = false;
        //   }
        // },
        //   关闭手机号弹出框
        showphonenumberclose() {
            this.showphonenumber = false
        },
        showpasswordclose() {
            this.showpassword = false
        },
        showpasswordsuccessfulclose() {
            this.showpasswordsuccessful = false
        },
        showlogoffclose() {
            this.showlogoff = false
        },
        // 去个人信息
        MyGotoperson() {
            uni.navigateTo({
                url: '/pages/PersonalInformation/PersonalInformation'
            })
        },
        // 返回上一个页面 Personalcenter
        navigateBack() {
            uni.navigateBack({
                delta: 1,
                success: () => {
                    // 返回成功后的回调函数
                },
                fail: () => {
                    // 返回失败后的回调函数
                }
            })
        },
        //退出登录
        singUp() {
            AuthApi.logout()
                .then((res) => {
                    // uni.setStorageSync('vuex/app', '')
                    uni.setStorageSync('SET_USER_INFO', '')
                    uni.setStorageSync('USER_INFO', '')
                    uni.setStorageSync('token', '')
                    uni.setStorageSync('LOGIN_STATUS', '')
                    uni.navigateTo({
                        url: '/pages/Login/Login'
                    })
                })
                .catch((err) => {
                    console.log(err)
                })
            // logOff().then((res) => {
            // 	//清除vueX中的用户信息
            // 	this.$store.commit('user/SET_USER_INFO', {});
            // 	//清除本地存储中的用户信息 uni.setStorageSync("token", res.token);
            // 	uni.setStorageSync("token", "");

            // 	uni.navigateTo({
            // 		url: "/pages/Login/Login",
            // 	});
            // })
        }
    }
}
</script>

<style lang="less" scoped>
.alldiv {
    width: 100vw;
    height: 100vh;

    //   这个是返回
    .navdiv {
        width: 100%;
        height: 10%;
        overflow: hidden;
        z-index: 999999;
        margin-bottom: 15px;
    }

    //   主体区域样式
    .setlistdiv {
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .setdiv {
            width: 95%;
            height: auto;
            margin-top: 5px;
            margin-bottom: 10px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        }
    }
}

.serphdiv {
    width: 300px;
    height: auto;

    .serdiv {
        width: 100%;
        height: 20%;
        display: flex;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-weight: bold;
        justify-content: center;
        align-items: center;
    }
}

/deep/ .u-button {
    height: 40px;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 110px !important;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    flex-direction: row;
    border-radius: 6px !important;
    border: 1px solid rgba(47, 212, 184, 1) !important;
}

.yandiv {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(121.57deg, rgba(64, 239, 137, 1) 0%, rgba(47, 212, 184, 1) 100%);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.yandivd {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 51, 51, 1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
